<style>
.inner-banner {
    padding: 45px 0;
    background: url(./inner-banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.inner-banner:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.76);
}
</style>
<script setup>
import courseApi from '@/api/courseApi'
import { reactive } from 'vue';
import useUserInfo from '@/store/user';

const userInfo = useUserInfo()
const navs = computed(() => {
    return SIDEBARITEMS[userInfo.data.user.type]
})
const route = useRoute()
const course = ref({
    title: '',
    cover: '',
    intro: '',
    paperType: { title: '' },
    subject: { title: '' },
    lessons: []
})

onMounted(async () => {
    const courseId = route.query.id
    const res = await courseApi.getDetail(courseId)
    course.value = res
    console.log(res)
})

const goto = (idx) => {
    console.log(idx)
    const el = document.getElementById(idx)
    el.scrollIntoView({ behavior: 'smooth' })
    // document.getElementById('app').scrollTo(0, 200 + el.offsetTop)
}

const modeList = reactive([
    { title: "备课视图", value: "prepare" },
    { title: "上课视图", value: "teach" },
    { title: "学生视图", value: "student" },
])
const mode = ref("student")
const modeShowMap = {
    prepare: {
        "介绍": true,
        "查看详情": true,
        "进度": true,
    },
    teach: {
        "介绍": true,
        "查看详情": true,
        "进度": true,
    },
    student: {
        "介绍": false,
        "查看详情": false,
        "进度": true,
    }
}
const canShow = computed(() => {
    return modeShowMap[mode.value]
})
</script>
<template>
    <div class="container w-10/12 m-auto">
        <AppBreadCrumb :list="[{ name: '首页', path: '/my' }, { name: '我的课程', path: '/course' }]"></AppBreadCrumb>
    </div>
    <div class="inner-banner mb-8">
        <div class="container w-10/12 m-auto relative z-10 text-white">
            <div class="flex items-center">
                <img class="" style="width:50px;height:50px;border-radius: 50%;" alt=""
                    src="../../assets/img/course/course-10.jpg">

                <div class="ml-3">
                    <h5><a href="instructor-profile.html" class="text-lg hover-highcolor">{{ course.title
                            }}</a>
                    </h5>
                    <p class="text-sm">初级</p>
                </div>
            </div>
            <h2 class="my-2 text-xl">{{ course.title }}</h2>
            <p class="mb-4">{{ course.title }}</p>
            <div class="flex items-center text-sm">
                <i class="feather-calendar"></i><span class="mr-4">课时数：{{ course.lessons.length }} </span>
                <i class="feather-database"></i><span class="mr-4">
                    知识点：{{ 28 }}个</span>
                <i class="feather-clock"></i>
                <span class="mr-4"> 时长：3小时20分钟</span>
                <i class="feather-slack"></i><span class="mr-4"> 代码量：300行</span>
                <span>难度:</span> 简单
            </div>
        </div>
    </div>

    <div class="container w-10/12 m-auto">

        <!-- 学生不能看到模式的切换 -->
        <div class="flex items-center mr-4" v-if="userInfo.data.user.type != 'student'">
            <span class="mr-2">课程模式：</span>
            <div class="flex">
                <div v-for="(item ) in modeList" :key="item.value" class="flex items-center mr-2">
                    <input type="radio" :id="item.value" name="mode" v-model="mode" :value="item.value" />
                    <label :for="item.value">{{ item.title }}</label>
                </div>
            </div>
        </div>
        <div class="flex">
            <div class="w-9/12 mr-2">
                <div v-for="(item, idx) in course.lessons" :key="item.id" class="flex box mb-4 p-4">
                    <div class="relative mr-4">
                        <span style="" class="indextag top">{{
                            idx + 1
                            }}</span>
                        <AppImg style="width:180px;" :src="item.cover" />
                    </div>
                    <div class="flex flex-col flex-auto">
                        <h4 style="color:#000;">{{ item.title }}</h4>
                        <p v-show="canShow['介绍']">{{ item.intro }}</p>
                        <!-- <p>
                            涉及学科：<span class="tag">数学</span>
                        </p> -->

                        <div class="my-4">
                            <app-lesson-proccess :lists="item.lessonSteps"></app-lesson-proccess>

                        </div>
                        <div v-show="canShow['查看详情']" class="mt-auto flex justify-end">
                            <button class="btn-enter"
                                @click="$router.push('/lesson-detail?id=' + item.id)">查看详情</button>
                        </div>
                    </div>

                </div>
                <div v-if="course.lessons.length === 0" class="box p-4">
                    <h4>暂无内容</h4>
                </div>
            </div>
            <div class="w-3/12 ml-2 -mt-60 z-10">
                <div class="box p-6">
                    <div>
                        <a href="https://www.youtube.com/embed/1trvO6dqQUI" class="video-thumbnail" data-fancybox="">
                            <div class="play-icon">
                                <i class="fa-solid fa-play"></i>
                            </div>
                            <img class="" src="../../assets/img/video.jpg" alt="">
                        </a>
                    </div>
                    <div class="flex items-center justify-between my-4">
                        <h4>FREE</h4>
                        <p><span>$99.00</span> 50% off</p>
                    </div>
                    <div class="flex items-center justify-between gap-6">
                        <button class="btn-share rounded-full w-full">收藏</button>
                        <button class="btn-share rounded-full w-full">分享</button>
                    </div>
                    <div class="pt-4">
                        <button class="btn-join rounded-full w-full">Enroll Now</button>
                    </div>
                </div>
                <div class="box mt-4 p-4">
                    <h4 class="mb-2">课程目标</h4>
                    <ul>
                        <ol class="arrow-right m-2">目标1</ol>
                        <ol class="arrow-right m-2">目标2</ol>
                        <ol class="arrow-right m-2">目标3</ol>
                        <ol class="arrow-right m-2">目标4</ol>
                    </ul>
                </div>
                <div class="box mt-4 p-4">
                    <h4 class="mb-2">知识点</h4>
                    <ul>
                        <ol class="tag cursor-pointer">HTML</ol>
                        <ol class="tag cursor-pointer">Javascript</ol>
                        <ol class="tag cursor-pointer">css</ol>
                        <ol class="tag cursor-pointer">jQuery</ol>
                        <ol class="tag cursor-pointer">Java</ol>
                        <ol class="tag cursor-pointer">Rect</ol>
                    </ul>
                </div>
                <div class="box mt-4 p-4">
                    <h4 class="mb-2">学习要求</h4>
                    <ul>
                        <ol class="arrow-right m-2">目标1</ol>
                        <ol class="arrow-right m-2">目标2</ol>
                        <ol class="arrow-right m-2">目标3</ol>
                        <ol class="arrow-right m-2">目标4</ol>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>
